<template>
    <div class="action_contnet">
        <panle title='订单信息' content="用户订单列表"></panle>
        <!--筛选条件-->
        <div class="shaixuan3">
            <div class="daohang_content">
                <PersButton type="text" size="mini" icon="el-icon-goback" label="返回上一页" @click="goback"></PersButton>
            </div>
            <div class="first_table">
                <el-table align="center" :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all>
                    <el-table-column align="center" fixed  width="80" label="ID"  prop="id"></el-table-column>
                    <el-table-column align="center" fixed  width="120" label="短编码"  prop="short_code"></el-table-column>
                    <el-table-column  align="center" fixed header-align="center" prop="wx_avatar" width="100" label="微信头像">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.wx_avatar" fit="fill" style="width: 60px;height: 60px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" fixed header-align="center" prop="wx_name"  width="120" label="微信昵称"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="order_num"  width="160"  label="订单号"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="course_title"  width="240"  label="课程名称"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="tel"  width="120"  label="手机号"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="pay_time" width="180" label="支付时间"> </el-table-column>
                    <el-table-column align="center"  header-align="center" prop="order_status_name"  width='100' label="订单状态"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="pay_status" width='100'  label="支付状态"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="total_fee" width='100'  label="支付金额"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="pingtai" width='100'  label="订单平台"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="isfinished" width='100'  label="是否领课"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="teacher_name" width='200'  label="预分配助教"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="old_zhujiao_list" width='220'  label="已加助教"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="laiyuan_name" width='150'  label="订单来源"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="time" width='180'  label="创建时间"></el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    
    import Panle from '@/components/Panle';
    import { orderInfo } from '@/api/live/manager';
    import PersButton from '@/components/PersButton';

    export default {
        components:{
            Panle,
            PersButton
        },
        data(){
            return {
                tableData:[],
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
            }
        },
        created(){
            this.init();
        },
        activated() {
            this.init();
        },
        methods: {
            refresh(e){
                this.init();
            },
            resetForm(formName) {
                this.init();
            },
            init(){
                let _param = {
                    liveId:this.$route.query.liveId,
                    type:this.$route.query.type,
                    pageSize:this.pageSize,
                    pageNumber:this.pageNumber
                }

                orderInfo(_param).then((res) => {
                    if (res.code == 200) {
                        this.total = res.data.total;
                        this.tableData = res.data.list;
                    } else {
                        this.msgError(res.msg);
                    }
                })

            },
            handleSizeChange (e) {
                this.pageSize = e;
                this.init();
            },
            handleCurrentChange (e) {
                this.pageNumber = e;
                this.init();
            },
            onlinechange(e){
                this.init();
            },
            goback() {
            this.$router.go(-1);
            },
            
        }
        
    }

</script>


<style>
.yixuan {
    margin: 20px;
    color: #787878;
}
.el-select .el-input {
    width: 130px;
}
.daohang_content {
    margin-top: 10px;
}
</style>